<div class="replication-dashboard box is-sideless is-fullwidth is-marginless" data-test-replication-dashboard>
  {{#if isReindexing}}
    <div class="reindexing-alert">
      <AlertBanner
        @title={{concat "Re-indexing in progress" reindexingStage}}
        @type="info"
        @progressBar={{progressBar}}
        @message={{reindexMessage}}
        data-test-isReindexing />
    </div>
  {{/if}}
  {{#if isSummaryDashboard}}
    <div class="summary-state">
      <h6 class="title is-5 {{unless (get (cluster-states summaryState) "isOk") "has-text-danger"}}" data-test-error>state</h6>
      {{#unless (get (cluster-states summaryState) "isOk")}}
        <AlertInline
          @type="danger"
          @message="The cluster is {{summaryState}}. Please check your server logs." />
      {{else}}
        <p class="has-text-grey is-size-8">The current operating state of both Disaster Recovery and Performance. This value should be ‘running.’ If the value is idle, it indicates an issue and needs to be investigated.</p>
      {{/unless}}
      <h2 class="title is-3" data-test-summary-state>{{summaryState}}
        {{#if (get (cluster-states summaryState) "isOk")}}
          <Icon @glyph={{get (cluster-states summaryState) "glyph"}} class="{{if (get (cluster-states summaryState) "isOk") "has-text-success" "has-text-danger"}}" data-test-icon />
        {{/if}}
      </h2>
    </div>
    <div
      class="selectable-card-container summary"
      data-test-selectable-card-container-summary>
        {{yield (hash
          card=(component componentToRender replicationDetails=replicationDetailsSummary)
        )}}
    </div>
  {{else}}
    <div
      class="selectable-card-container {{if isSecondary 'secondary' 'primary'}}"
      data-test-selectable-card-container={{if isSecondary 'secondary' 'primary'}}>
      {{yield (hash
        card=(component componentToRender replicationDetails=replicationDetails)
      )}}
      {{#if (not isSecondary)}}
        {{yield (hash secondaryCard=(component 'known-secondaries-card'))}}
      {{/if}}
    </div>
  {{/if}}
  {{#if isSyncing}}
    <div class="syncing-alert">
      <AlertBanner
        @title="Syncing in progress"
        @type="info"
        @secondIconType="loading"
        @message="The cluster is syncing. This happens when the secondary is too far behind the primary to use the normal stream-wals state for catching up."
        data-test-isSyncing/>
    </div>
  {{/if}}
  {{#unless isSummaryDashboard}}
    <ReplicationTableRows
      @replicationDetails={{replicationDetails}}
      @clusterMode={{clusterMode}}/>
    <ReplicationDocLink data-test-replication-doc-link/>
  {{/unless}}
</div>
